<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>景点管理</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <link href="./static/bootstrap/css/bootstrap.css"
        rel="stylesheet" type="text/css"/>
  <script type="text/javascript"
          src="./static/bootstrap/js/bootstrap.js">
  </script>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      display: flex;
      min-height: 100vh;
      font-family: Arial, sans-serif;
    }

    .sidebar {
      width: 200px;
      background-color: #2D3139;
      color: white;
      padding: 20px 0;
    }

    .logo {
      padding: 20px;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo img {
      height: 30px;
    }

    .nav-item {
      padding: 15px 20px;
      display: flex;
      align-items: center;
      gap: 10px;
      color: #888;
      text-decoration: none;
      transition: background-color 0.3s;
      background-color: transparent;
    }

    .nav-item.active {
      background-color: #FFB800;
      color: white;
    }

    .nav-item:hover {
      background-color: #363B44;
    }

    .main-content {
      flex: 1;
      background-color: #F5F5F5;
    }

    .header {
      background-color: white;
      padding: 15px 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #eee;
    }

    .user-menu {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .logout-icon {
      cursor: pointer;
      color: #666;
    }
  </style>


<script>
  function setActiveNavItem(element) {
    // 移除所有导航项的 active 类
    document.querySelectorAll('.nav-item').forEach(item => {
      item.classList.remove('active');
    });
    // 为被点击的导航项添加 active 类
    element.classList.add('active');
    // 更新标题
    document.querySelector('.header h1').textContent = element.querySelector('span').textContent;
    // 获取页面ID
    const pageId = element.id;
    // 加载对应的页面内容
    loadPageContent(pageId);
  }

</script>
</head>
<body>
<div class="sidebar">
  <div class="logo">
    <img src="static/img/PS2lfS0492.jpg" alt="旅游管理系统">
    <span>旅游管理</span>
  </div>

  <nav>
    <a href="/backStageManagement.jsp" id="userManagement" class="nav-item active" onclick="setActiveNavItem(this)">
      <i>👥</i>
      <span>系统用户管理</span>
    </a>
    <a href="/HotelReviews" id="forum" class="nav-item" onclick="setActiveNavItem(this)">
      <i>📑</i>
      <span>论坛</span>
    </a>
    <a href="/hqfSearch?pageNo=1" id="attractionManagement" class="nav-item" onclick="setActiveNavItem(this)">
      <i>🍽️</i>
      <span>景点管理</span>
    </a>
    <a href="jdshowAll" id="hotelManagement" class="nav-item" onclick="setActiveNavItem(this)">
      <i>🎁</i>
      <span>酒店管理</span>
    </a>

    <a href="http://localhost:8080/view-tickets" id="ticketManagement" class="nav-item" onclick="setActiveNavItem(this)">
      <i>📋</i>
      <span>车票管理</span>
    </a>
    <a href="orderManage.jsp" id="orderManagement" class="nav-item" onclick="setActiveNavItem(this)">
      <i>📋</i>
      <span>订单管理</span>
    </a>

  </nav>
</div>
<main id="index-main" style="padding: 20px;">
<div class="main-content">
  <header class="header">
    <h1>景点管理</h1>
<%--    <div class="user-menu">--%>
<%--    </div>--%>
  </header>

    <div class="container">
      <div class="row table-responsive">
        <table class="table table-striped table-bordered  table-condensed">
          <thead>
          <tr>
            <th>序号</th>
            <th>景点名称：</th>
            <th>景点地址</th>
            <th>价格</th>
            <th>图片</th>
            <th>满意度</th>
            <th>城市</th>
            <th>链接</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <c:forEach items="${hqfPageInfo.list}" var="scenic">
            <tr>
              <td>${scenic.scenic_Id}</td>
              <td>${scenic.scenic_name}</td>
              <td>${scenic.scenic_address}</td>
              <td>${scenic.price}</td>
              <td>${scenic.img}</td>
              <td>${scenic.satisfaction}</td>
              <td>${scenic.city}</td>
              <td>${scenic.html}</td>
              <td>
                  <%--根据id删除数据--%>
                <button onclick="deleteScenicInfo(${scenic.scenic_Id}) " type="button">删除</button>
                  <%--在本页修改数据，--%>
                <button onclick="updateScenicInfo(${scenic.scenic_Id}) " type="button">修改</button>

              </td>
            </tr>

          </c:forEach>
          </tbody>
          <tfoot>
          <tr>
            <td colspan="4">
              <nav aria-label="Page navigation">
                <ul class="pagination pagination-lg">
                  <li>
                    <a href="/hqfSearch?pageNo=${hqfPageInfo.currPageNo-1}" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>

                  <c:forEach var="i" begin="1" end="${hqfPageInfo.totalPages}">
                    <li><a href="/hqfSearch?pageNo=${i}">${i}</a></li>
                  </c:forEach>
                  <li>
                    <a href="/hqfSearch?pageNo=${hqfPageInfo.currPageNo+1}" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </td>
          </tr>
          </tfoot>
        </table>
      </div>
    </div>

    <!-- Button trigger modal -->
  <div class="btn-group btn-group-lg" role="group" aria-label="新增景点数据按钮组">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
      新增景点数据
    </button>
  </div>

  <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">新增景点</h4>
          </div>
          <div class="modal-body">
            <form action="/hqfAddScenic" id="addform" enctype = "multipart/form-data" method="post">
              <div class="mb-3">
                <label for="scenicname" class="col-form-label">景点名称：</label>
                <input type="text" class="form-control" id="scenicname" name="scenicname">
              </div>
              <div class="mb-3">
                <label for="address" class="col-form-label">景点地址：</label>
                <input type="text" class="form-control" id="address" name="address">
              </div>

              <div class="mb-3">
                <label for="price" class="col-form-label">价格：</label>
                <input type="text" class="form-control" id="price" name="price">
              </div>

              <div class="mb-3">
                <label for="picture" class="col-form-label">图片：</label>
                <input type="file" class="form-control" id="picture"  name="picture">
              </div>

              <div class="mb-3">
                <label for="satisfaction" class="col-form-label">满意度：</label>
                <input type="text" class="form-control" id="satisfaction" name="satisfaction">
              </div>

              <div class="mb-3">
                <label for="city" class="col-form-label">城市：</label>
                <input type="text" class="form-control" id="city" name="city">
              </div>

              <div class="mb-3">
                <label for="html" class="col-form-label">链接：</label>
                <input type="text" class="form-control" id="html" name="html">
              </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="close">关闭</button>
            <button type="button" class="btn btn-primary">保存更改</button>
            <%-- 添加按钮--%>
            <input type="submit" class="btn btn-success" value="添加">
          </div>
          </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal for Update -->
  <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="updateModalLabel">修改景点信息</h4>
        </div>
        <div class="modal-body">
          <form action="/hqfUpdateScenic" id="updateform" enctype="multipart/form-data" method="post">
            <!-- 添加隐藏的ID字段 -->
            <input type="hidden" id="scenicId" name="id">
            <div class="mb-3">
              <label for="updatescenicname" class="col-form-label">更改后的景点名称：</label>
              <input type="text" class="form-control" id="updatescenicname" name="updatescenicname">
            </div>
            <div class="mb-3">
              <label for="updateaddress" class="col-form-label">更改后的景点地址：</label>
              <input type="text" class="form-control" id="updateaddress" name="updateaddress">
            </div>
            <div class="mb-3">
              <label for="updateprice" class="col-form-label">更改后的价格：</label>
              <input type="text" class="form-control" id="updateprice" name="updateprice">
            </div>
            <div class="mb-3">
              <label for="updatepicture" class="col-form-label">上传需要更改的图片：</label>
              <input type="file" class="form-control" id="updatepicture" name="updatepicture">
            </div>
            <div class="mb-3">
              <label for="updatesatisfaction" class="col-form-label">更改后的满意度：</label>
              <input type="text" class="form-control" id="updatesatisfaction" name="updatesatisfaction">
            </div>
            <div class="mb-3">
              <label for="updatecity" class="col-form-label">更改后的城市：</label>
              <input type="text" class="form-control" id="updatecity" name="updatecity">
            </div>
            <div class="mb-3">
              <label for="updatehtml" class="col-form-label">更改的链接：</label>
              <input type="text" class="form-control" id="updatehtml" name="updatehtml">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
              <input type="submit" class="btn btn-success" id="save" value="保存并提交更改">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

  </main>


<script type="text/javascript">

  //跳转用户页面
  function login(){
    window.location.href="backStageManagement.jsp";
  }


      // 景点根据id删除内容
  function deleteScenicInfo(id) {
        // 确认是否删除数据

        let isDelete1 = confirm("是否删除数据");
        if (isDelete1) {
          // 确定删除，发送ajax请求，根据id删除数据
          $.ajax({
            url: "/hqfdelete",
            data: {id: id},
            type: "post",
            dataType: "text",
            async: false,
            success: function (data) {
              // 删除成功，刷新页面
              if (data === "1") {
                alert("删除成功");
                window.location.reload();
              } else {
                alert("删除失败，请重试");
              }
            },
            error: function (xhr, status, error) {
              // 请求失败时的处理
              console.error("请求失败：" + error);
              alert("请求失败，请重试");
            }
          })
        } else {
          alert("取消删除")
        }
    }

    /*点击关闭按钮时触发*/
   $('#myModal .btn-secondary').off('click').on('click', function () {
    /*关闭模态框*/
    $('#myModal').modal('hide');
    });

  function bindEvents() {
    // 绑定关闭按钮事件
    $('#myModal .btn-secondary').off('click').on('click', function () {
      $('#myModal').modal('hide');
    });
  }


    //修改景点信息数据
    function updateScenicInfo(id){
      // 显示模态框
      $("#updateModal").modal("show");


      // 动态设置隐藏ID字段
      $("#scenicId").val(id);

    }

</script>
  </body>
</html>
